$(window).load(function () {
    var arrOfJson = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity: 0.2,
            "z-index":2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity: 0.8,
            "z-index":3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity: 1,
            "z-index":4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:0.8,
            "z-index":3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity: 0.2,
            "z-index":2
        }
    ];
    $('#slide li').each(function fn(i , e) {
        $(e).css('z-index' , arrOfJson[i]['z-index'])
        $(e).animate(arrOfJson[i] , 1000)
        $('#wrap').mouseenter(function (){
            $('#arrow').fadeTo(100 , 1)
        }).mouseleave(function (){
            $('#arrow').fadeOut(100 , 0)
        })
    })
    $('.prev').on('click' , function (){
        let first = arrOfJson.shift()
        arrOfJson.push(first)
        $('#slide li').each(function fn(i , e) {
            $(e).css('z-index' , arrOfJson[i]['z-index'])
            $(e).animate(arrOfJson[i] , 1000)
        })
    })
    $('.next').on('click' , function (){
        let last = arrOfJson.pop()
        arrOfJson.unshift(last)
        $('#slide li').each(function fn(i , e) {
            $(e).css('z-index' , arrOfJson[i]['z-index'])
            $(e).animate(arrOfJson[i] , 1000)
        })
    })  
});








